<template>
  <div class="AddMessage-container">
    <el-card class="AddMessage-select" shadow="never">
      <!--    输入框盒子-->
      <div class="AddMessage-inputBar">
        <div class="Select">
          通知标题：
          <el-input class="select-message" v-model="selectInfo.noticeTitle" placeholder="请输入通知名关键字" size="small" clearable/>
          通知类型:
          <el-select  @change="this.handleQuery" size="small" placeholder="请选泽通知类型" class="select-message" v-model="selectInfo.selection" clearable>
            <el-option v-for="item in typeOptions" :key="item.value" :value="item.value" :label="item.label">
              {{ item.label }}
            </el-option>
          </el-select>
          创建日期：
          <el-date-picker v-model="selectInfo.dateTimeChoose"
                          class="select-message choose-date"
                          @change="this.handleQuery"
                          size="small" type="datetimerange"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          clearable range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
          <el-button type="primary"  size="small" class="AddMessage-SelectButton" icon="el-icon-search" @click="handleQuery">查 询
          </el-button>
        </div>
      </div>
    </el-card>
    <el-card class="container" shadow="never">
      <div class="AddMessage-tableButton">
        <el-button type="primary" size="mini" @click="handleAddNotice">+添加</el-button>
        <el-button type="danger" size="mini" @click="handleDeleteNotice('批量',null)">批量删除</el-button>
      </div>
      <!--      表格-->
      <el-table border stripe :cell-style="rowStyle" v-loading="loading"
                :header-cell-style="rowStyle" @selection-change="handleSelectionChange" :data="noticeData">
        <el-table-column type="selection" min-width="55px"></el-table-column>
        <el-table-column prop="noticeTitle" label="通知标题">
          <template v-slot="scope">
            <el-link :type="scope.row.noticeType===0?'success':'primary'" @click="showNotice(scope.row.id)">{{ scope.row.noticeTitle }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column width="150px" prop="noticeType" label="通知类型">
          <template v-slot="scope">
            <el-tag :type="scope.row.noticeType===0?'success':'primary'">
              {{ scope.row.noticeType === 0 ? '全体通知' : '个体通知' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="noticeUserList" label="被通知人">
          <template v-slot="scope">
            {{ scope.row.noticeUserList === null ? '全体用户' : scope.row.noticeUserList }}
          </template>
        </el-table-column>
        <el-table-column prop="createUserName" label="创建人" width="180px"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180px"></el-table-column>
        <el-table-column label="操作" width="150px">
          <template v-slot="scope">
            <el-button type="text" size="mini" @click="handleEditNotice(scope.row.id)">编辑</el-button>
            <el-button type="text" size="mini" style="color: red" @click="handleDeleteNotice('one',scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页组件-->
      <el-pagination :page-sizes="[5, 10, 20,50,100]" :page-size="this.pageSize" :current-page="this.page"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="this.counts" @size-change="handleSizeChange" @current-change="handleCurrentChange">
      </el-pagination>
    </el-card>
    <ShowNotice/>
    <EditNotice/>
    <AddNotice/>
  </div>
</template>
<script>
import store from '@/store'
import ShowNotice from '@/components/notice/ShowNotice.vue'
import AddNotice from '@/components/notice/AddNotice.vue'
import { DeleteNoticeApi, GetNoticePageApi } from '@/request/message/notice-api'
import EditNotice from '@/components/notice/EditNotice.vue'

export default {
  created () {
    this.init()
  },
  components: {
    ShowNotice,
    AddNotice,EditNotice
  },
  data () {
    return {
      selectInfo:{
        selection:null,
        dateTimeChoose:[],
        noticeTitle: ''
      },
      counts: 0,     //总数
      page: 1,      //当前页
      pageSize: 10, //每页个数
      loading: false,
      checkList:[],
      typeOptions: [
        {
          value: '0',
          label: '全体通知'
        },
        {
          value: '1',
          label: '个人通知'
        }
      ],
      noticeData: []
    }
  },
  methods: {
    //页面初始化
    async init () {
      this.loading = true
      const param={
        page:this.page,
        pageSize:this.pageSize,
        noticeType:this.selectInfo.selection?this.selectInfo.selection:undefined,
        noticeTitle: this.selectInfo.noticeTitle?parseInt(this.selectInfo.noticeTitle):undefined,
        beginTime:this.selectInfo.dateTimeChoose?this.selectInfo.dateTimeChoose.length===2?this.selectInfo.dateTimeChoose[0]:undefined:undefined,
        endTime:this.selectInfo.dateTimeChoose?this.selectInfo.dateTimeChoose.length===2?this.selectInfo.dateTimeChoose[1]:undefined:undefined
      }
      let res=await GetNoticePageApi(param)
      if (res&&res.code===200){
        this.noticeData=res.data.records
        this.counts = res.data.total
      }else {
        this.$message.error(res.msg?res.msg:"查询通知列表失败")
      }
      this.loading = false
    },
    //添加信息
    handleAddNotice () {
      store.commit('NoticeEdit/changeAddNoticeSync', true)
    },
    showNotice (id) {
      store.commit('NoticeEdit/changeShowNoticeSync', true)
      store.commit('NoticeEdit/changeShowNoticeId', id)
    },
    handleEditNotice(id){
      store.commit('NoticeEdit/changeEditNoticeSync', true)
      store.commit('NoticeEdit/changeEditNoticeId', id)
    },
    rowStyle () {
      return 'text-align:center'
    },
    handleSelectionChange (val) {
      let checkArr = []
      val.forEach((n) => {
        checkArr.push(n.id)
      })
      this.checkList = checkArr
    },
    handleDeleteNotice (type, id) {
      if (type === '批量' && id === null) {
        if (this.checkList.length === 0) {
          return this.$notify.warning({
            title: '警告',
            message: '请选择删除内容！'
          })
        }
      }
      //重新提示是否删除
      this.$confirm('删除通知消息，是否继续？', '确认删除', {
        'confirmButtonText': '确定',
        'cancelButtonText': '取消',
        'type': 'warning'
      }).then(async () => {
        //确认是单删还是批量删除
        let ids = (type === '批量') ? this.checkList.join(',') : id
        let res = await DeleteNoticeApi(ids)
        if (res.code === 200) {
          //删除成功后的逻辑
          this.handleQuery()
          this.$message.success('删除成功！')
        } else {
          this.$message.error(res.msg)
        }
      }).catch((e) => {
        if (e === 'cancel') {
          this.$message.info('取消删除')
        } else {
          this.$message.error('未知错误！')
        }
      })
    },
    // 查询
    handleQuery () {
      this.page = 1
      this.init()
    },
    // pageSize切换
    handleSizeChange (val) {
      this.pageSize = val
      this.init()
    },
    // 当前页面切换
    handleCurrentChange (val) {
      this.page = val
      this.init()
    }
  }
}
</script>
<style scoped lang="less">
.AddMessage-container {
  .AddMessage-select {
    margin-bottom: 10px;

    .AddMessage-inputBar {
      font-size: 14px;

      .Select {
        .select-message {
          width: 150px;
          margin-right: 20px;
        }
        .choose-date{
          width: 300px;
        }
      }
    }
  }

  .container {
    .AddMessage-tableButton {
      float: right;
      margin: 10px 0 10px 10px;
    }

    .el-pagination {
      text-align: center;
      margin: 15px;
    }
  }
}
</style>
